<template>
    <view class="proxy-goods-select-list-page">
        <!-- Header -->
        <view class="header">
            <!-- 吸顶栏 -->
            <u-sticky offset-top="0" h5-nav-height="0">
                <!-- 搜索 -->
                <view class="search row">
                    <u-search
                        class="flex1"
                        v-model="keyword"
                        :focus="showHistory"
                        @focus="showHistory = true"
                        @search="onSearch"
                        bg-color="#F4F4F4"
                    />
                    <view class="search--cancel" v-show="showHistory" @tap="onCancelSearch"
                        >取消</view
                    >
                </view>
            </u-sticky>
        </view>

        <!-- 搜索历史 -->
        <view v-show="showHistory" class="bg-white search-container">
            <view v-if="hotList.length" class="search-content">
                <view class="search-title">热门搜索</view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in hotList" :key="index">
                        <view
                            class="search-words br60 mr20 mb20 lighter sm line1"
                            @tap="onChangeKeyword(item)"
                            >{{ item }}</view
                        >
                    </block>
                </view>
            </view>
            <view v-if="historyList.length" class="search-content">
                <view class="search-title row-between">
                    <view>历史搜索</view>
                    <view
                        class="xs muted mr20"
                        style="padding: 10rpx 20rpx"
                        @tap="clearSearchHistory"
                        >清空</view
                    >
                </view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in historyList" :key="index">
                        <view
                            class="search-words br60 mr20 mb20 lighter sm line1"
                            @tap="onChangeKeyword(item)"
                            >{{ item }}</view
                        >
                    </block>
                </view>
            </view>
            <view class="search-mask" @tap="onCancelSearch"></view>
        </view>

        <!-- Main -->
        <view class="main" v-show="!showHistory">
            


            <!-- 商品列表 -->
            <view class="goods-list-wrap">
                <!-- 商品样式1 -->
                <view v-show="goodsType == 'one'">
                    <view class="goods-container-one">
                        <block v-for="(item, index) in goodsList" :key="item.id">
                            <view class="goods-item-one" @tap="goGoodsDetail(item.id)">
                                <!-- Image -->
                                <u-image
                                    width="220"
                                    height="220"
                                    border-radius="4px"
                                    :src="item.image"
                                />

                                <view class="goods-info">
                                    <!-- Name -->
                                    <view class="row">
                                        <!-- <view class="lease-icon">租</view> -->
                                        <view class="goods-name line1" style="width: 420rpx">{{
                                            item.name
                                        }}</view>
                                    </view>
                                    <!-- Tag -->
                                    <view class="row mt10">
										<view class="mr10">
											库存：300 |
										</view>
										<view class="goods-tag">“已有999次租赁”</view>
                                    </view>
									
									<view class="row btn-row mt30">
										<view class="">
											<view class="row">
												<deposit-tag price="683"></deposit-tag>
											</view>
											<!-- Price -->
											<view class="ornament goods-price mt10">
											    <view>
											        <text class="xs">¥</text>
											        <!-- 整数 -->
											        <text class="xxl">{{
											            formatPrice(item.price, 'integer')
											        }}</text>
											        <!-- 小数 -->
											        <text class="xs">{{
											            formatPrice(item.price, 'decimals')
											        }}</text>
											        <!-- 单位 -->
											        <text class="xs">{{
											            item.is_unit == 1 ? '/天' : '/月'
											        }}</text>
											    </view>
											</view>
										</view>
										<view class="btn-box">
											<view class="btn add-cart">加入购物车</view>
											<view class="btn order">立即下单</view>
										</view>
									</view>
									
                                </view>
                            </view>
                        </block>
                    </view>
                </view>

            </view>




            <!-- 加载状态 -->
            <loading-footer :status="status" :slot-empty="true">
                <view slot="empty" class="column-center" style="padding-top: 200rpx">
                    <image class="img-null" src="/static/images/goods_null.png"></image>
                    <text class="lighter">暂无商品</text>
                </view>
            </loading-footer>
        </view>
		
		
		
		<!-- 购物车  浮动按钮 -->
		<navigator open-type="navigate" hover-class="none" url="/pages/shop_cart/shop_cart">
			<view class="cart-tap">
				<u-icon name="shopping-cart" />
			</view>
		</navigator>
    </view>
</template>

<script>
import { getLeaseClassify, getLeaseGoodsList } from '@/api/lease.js'

import { getSearchpage, clearSearch } from '@/api/store'

import { loadingFun, formatPrice } from '@/utils/tools'
import { loadingType } from '@/utils/type'

export default {
    data() {
        return {
            keyword: '', // 搜索内容
            status: loadingType.LOADING, // 加载状态
            page: 1, // 当前数据页面
            goodsType: 'one', // 商品列表样式展示方式
            goodsList: [], // 商品列表数据
            priceSort: '', // 价格排序
            saleSort: '', // 销量排序
            classify_id: '', // 分类ID
            showHistory: false, // 显示搜索历史
            historyList: [], // 搜索历史数据列表
            hotList: [], // 热门搜素数据列表
            leaseClassifyList: [] // 租赁分类列表
        }
    },
    watch: {
        // 监听属性
        keyword(value, old) {
            if (!value && !this.id) this.showHistory = true
        },
        // 是否处于搜索
        showHistory(value) {
            if (value) this.getSearchpageFun()
        }
    },
    computed: {
        comprehensive() {
            const priceSort = this.priceSort
            const saleSort = this.saleSort

            return !priceSort && !saleSort ? true : false
        }
    },

    onLoad(options) {
        // 获取分类列表数据
        getLeaseClassify().then((res) => {
            if (res.code != 1) return
            this.leaseClassifyList = res.data
            // this.classify_id = res.data[0].id || '';
            // 商品列表数据请求
            this.getGoodsList()
        })
    },

    // 上拉加载更多数据
    onReachBottom() {
        this.getGoodsList()
    },

    methods: {
        // 格式化价格输出
        formatPrice,

        // 更改商品排序样式
        changeType() {
            this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
        },

        // 清空搜索记录
        clearSearchHistory() {
            clearSearch().then((res) => {
                if (res.code != 1) return
                this.getSearchpageFun()
            })
        },

        // 点击取消搜索
        onCancelSearch() {
            this.showHistory = false
            // this.onRefresh();
        },

        // 点击分类
        onClassify(goods_id) {
            this.classify_id = goods_id
            this.onRefresh()
        },

        // 点击综合
        onNormal() {
            this.priceSort = ''
            this.saleSort = ''
            this.onRefresh()
        },

        // 点击价格排序
        onPriceSort() {
            this.saleSort = ''
            this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
            this.onRefresh()
        },

        // 点击销量排序
        onSaleSort() {
            this.priceSort = ''
            this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
            this.onRefresh()
        },

        // 获取搜索变化
        getSearchpageFun() {
            getSearchpage().then((res) => {
                if (res.code != 1) return
                const data = res.data
                this.hotList = data.hot_lists
                this.historyList = data.history_lists
            })
        },

        // 搜索
        onSearch() {
            this.onRefresh()
        },

        // 刷新列表数据
        onRefresh() {
            this.showHistory = false
            this.page = 1
            this.goodsList = []
            this.status = loadingType.LOADING
            this.$nextTick(() => this.getGoodsList())
        },

        // 根据字符串搜索内容
        onChangeKeyword(item) {
            this.keyword = item
            this.showHistory = false
            this.onRefresh()
        },

        // 获取商品列表数据
        getGoodsList() {
            if (this.status == loadingType.FINISHED) return
            // 参数
            const field = {
                category_id: this.classify_id,
                keyword: this.keyword,
                price: this.priceSort,
                sales_sum: this.saleSort
            }
            // 请求
            loadingFun(getLeaseGoodsList, this.page, this.goodsList, this.status, field).then(
                (res) => {
                    console.log(res)
                    if (!res) return
                    this.page = res.page
                    this.goodsList = res.dataList
                    this.status = res.status
                }
            )
        },

        // 查看商品详情
        goGoodsDetail(goods_id) {
            uni.navigateTo({
                url:
                    '/package_goods/pages/goods_detail/index' + '?' + 'id=' + goods_id
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
